<template>
	<!-- 报名名单 -->
	<view class="regis_list">
		<view class="box" v-if="regisList.length !== 0">
			<t-table @change="change">
				<t-tr>
					<t-th>序号</t-th>
					<t-th>姓名</t-th>
					<t-th v-if="act_type == '线下'">手机号</t-th>
					<t-th>报名人数</t-th>
				</t-tr>
				<t-tr v-for="item in regisList" :key="item.id">
					<t-td>{{ item.id }}</t-td>
					<t-td>{{ item.name }}</t-td>
					<t-td v-if="act_type == '线下'">{{ item.phone }}</t-td>
					<t-td>{{ item.people_num }}</t-td>
				</t-tr>
			</t-table>
		</view>
		<view class="none" v-if=" !regisList.length">
			还没有用户报名喔，赶快去报名吧~_~
		</view>
		<view class="copy-area">
			<view class="copy" @tap.stop="copyurl">复制活动报名单链接</view>
		</view>
		
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import uniCopy from '../../../common/xb-copy/uni-copy.js'
	export default {
		
		data() {
			return {
				act_id:'',		//活动id
				regisList:[],	//报名名单	
				act_type:'',	//活动类型
			}
		},
		
		components:{
			tTable,
			tTh,
			tTr,
			tTd
		},
		
		async onLoad(p) {
			console.log(p);
			this.act_id = p.act_id
			this.act_type = p.act_type
			this.regisList = await api.GetActRegisList(this.act_id)
			console.log(this.regisList);
		},
		
		methods:{
			async copyurl() {//复制活动报名单链接
				let url = await api.GetActExcelURL(this.act_id)
				uniCopy({//引入对uni.setClipboardData进一步封装的uniCopy
					content:url,
					success:(res)=>{
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error:(e)=>{
							uni.showToast({
								title: e,
								icon: 'none',
								duration:3000,
							})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.none {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.copy-area {
	position: fixed;
	height: 150rpx;
	width: 750rpx;
	bottom: 0;
	background-color: #fff;
	border-top: 1rpx solid #F3F6F5;
	button {
		padding: 0;
		// margin: 0;
		// background: transparent;
		// display: flex;
		// align-items: center;
		font-size: 32rpx;
	}
}
.copy {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 600rpx;
	height: 82rpx;
	margin: auto;
	left: 0;
	right: 0;
	border-radius: 50rpx;
	text-align: center;
	line-height: 82rpx;
	color: #FFFFFF;
	border-radius:60rpx;
	background-color: #0068FF;
	// position: fixed;
}
</style>
